<template>
    <div class="login">
        <div class="loginDiv">
            <div class="loginLogo">
                <img src="../assets/logo.png" alt="">
                <span>餐厅管理系统</span>
            </div>
            <div class="loginUser">
                <span>账号：</span>
                <el-input
                        v-model="user"
                        placeholder="请输入用户名"
                        id="user"
                        suffix-icon="el-icon-user">
                </el-input>
            </div>
            <div class="loginUser">
                <span>密码：</span>
                <el-input
                        v-model="password"
                        placeholder="请输入密码"
                        id="password"
                        show-password >
                </el-input>
            </div>
            <div class="loginBtn">
                <el-button type="warning" size="medium" @click="login">登录</el-button>
                <el-button size="medium"  style="color: #409EFF" @click="reset">重置</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    import * as url from '../http/api'
    export default {
        name: "login",
        data(){
            return {
                user:'',
                password:'',
            }
        },
        methods:{
            login(){
                console.log(this.user,this.password)
               // this.$router.push('/front/index')
                let obj = {
                    name:this.user,
                    password:this.password
                }
                if(obj.name !== null || obj.password !== null){
                    this.$axios({
                        url:url.userLogin,
                        method:'post',
                        data:obj,
                    }).then(req=>{
                        console.log(req.data.Code)
                        if(req.data.Code === 200){
                            this.$router.push('/front/index')
                        }else {
                            alert('用户名或密码输入错误，请重新输入！')
                            this.$router.push('/login')
                        }
                    }).catch(err=>{
                        console.log(err)
                    })
                }else {
                    alert('用户名或密码不能为空，请重新输入！')
                    this.$router.push('/login')
                }
            },
            reset(){
                this.user = ''
                this.password = ''
            }
        }
    }
</script>

<style scoped lang="less">
    .login{
        width: 100%;
        height: 600px;
        background-image: url("../assets/bg2.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        .loginDiv{
            width: 400px;
            height: 300px;
            margin: 150px auto;
            border: 2px solid rgba(24, 213, 213, 0.93);
            border-radius: 3px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.20);
            .loginUser{
                width: 400px;
                margin: 20px auto;
                text-align: center;
                span{
                    display: inline-block;
                    height: 40px;
                    width: 80px;
                    line-height: 40px;
                    color: #ffffff;
                    font-weight: bold;
                }
                .el-input{
                    height: 40px;
                    width: 200px;
                    line-height: 40px;
                }
            }
        }
        .loginBtn{
            width: 400px;
            height: 50px;
            line-height: 50px;
            margin-top: 20px;
            text-align: center;
        }
        .loginLogo{
            width: 400px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-top: 20px;
            img{
                width: 180px;
                height: 50px;
            }
           span{
               font-size: 20px;
               font-weight: bolder;
               color: #244471;
           }
        }
    }

</style>